import dayjs from "dayjs";
import ChartTitle from "./common/title";
import ChartCycleList from "./common/cycle-list";
import ChartsDatePagination from "./common/date-pagination";
// 图表混入属性
const ChartDataMixin = {
  data() {
    return {
      dayjs,
      show: true,
      chart: null,
      option: null,
      startTime: null,
      endTime: null
    };
  },
  props: {
    chartItem: {
      type: Object,
      default: () => ({})
    },
    chartData: {
      type: Object,
      default: () => ({})
    },
    chartIndex: {
      type: Number,
      default: 0
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showChartType: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    ChartTitle,
    ChartCycleList,
    ChartsDatePagination
  },
  computed: {
    charts() {
      return this.chartItem.charts || [];
    }
  },
  watch: {
    chartData: {
      handler() {
        if (!this.option) {
          this.initChart();
          // this.fullscreenChart(true);
        } else {
          this.updateChart();
          // this.fullscreenChart(true);
        }
      },
      deep: true,
      immediate: false
    }
  },
  created() {
    this.initDate(this.showChartType.cycleType);
  },
  mounted() {
    if (this.chartData) {
      this.initChart();
    }
  },
  methods: {
    initDate(cycleType) {
      let startTime = null,
        endTime = null;
      if (cycleType === 1) {
        startTime = this.dayjs().subtract(1, "day");
        endTime = this.dayjs();
      } else if (cycleType === 2) {
        startTime = this.dayjs().subtract(2, "week");
        endTime = this.dayjs();
      } else if (cycleType === 3) {
        startTime = this.dayjs().subtract(1, "year");
        endTime = this.dayjs();
      } else if (cycleType === 4) {
        startTime = this.dayjs()
          .startOf("year")
          .subtract(7, "year");
        endTime = this.dayjs()
          .startOf("year")
          .add(1, "year");
      } else if (cycleType === 0) {
        startTime = this.dayjs().subtract(1, "hour");
        endTime = this.dayjs();
      } else if (cycleType === 5) {
        startTime = this.dayjs().subtract(2, "week");
        endTime = this.dayjs();
      } else {
        startTime = this.dayjs().subtract(2, "week");
        endTime = this.dayjs();
      }
      this.startTime = startTime;
      this.endTime = endTime;
      return { startTime, endTime };
    },
    updateChart() {
      let xAxisData = this.formatterXAxisData(this.chartData);
      let series = this.formatterSeries(this.chartData, xAxisData);
      // console.log(xAxisData, series);
      let option = this.chart.getOption();
      option.series = series;
      if (option.xAxis && option.xAxis[0]) {
        option.xAxis[0].data = xAxisData;
      }
      this.chart.setOption(option, true);
    },
    eventShowChange(val) {
      this.show = val;
    },
    eventDateChange(day) {
      let type = "";
      let res = false;
      switch (this.showChartType.cycleType) {
        case 0:
          type = "millisecond";
          break;
        case 1:
          type = "day";
          break;
        case 2:
          type = "week";
          day = day > 0 ? 2 : -2;
          break;
        case 3:
          type = "year";
          break;
        case 4:
          type = "year";
          day = day > 0 ? 7 : -7;
          break;
        case 5:
          type = "week";
          day = day > 0 ? 2 : -2;
          break;
        default:
          type = "day";
          break;
      }
      if (
        this.showChartType.cycleType == 2 ||
        this.showChartType.cycleType == 1
      ) {
        res = this.startTime
          .add(day, type)
          .add(1, "millisecond")
          .isAfter(this.dayjs().startOf("date"));
      } else {
        res = this.startTime
          .add(day, type)
          .isAfter(this.dayjs().startOf("date"));
      }
      if (res) {
        this.$vux.toast.text("只能查看当天之前的数据");
        return;
      }
      this.startTime = this.startTime.add(day, type);
      this.endTime = this.endTime.add(day, type);

      let date = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.$emit("onDateChange", date);
    },
    eventCycleChange(ele, index) {
      let { cycleType } = ele;
      this.initDate(cycleType);
      let date = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.$emit("onCycleChange", index, date);
    }
  }
};

export { ChartDataMixin };
